<template>
  <!-- 联系我们 -->
  <div class="contact">
    <!-- <img class="contact_bg" src="@/assets/images/contact_bg.png" alt /> -->
    <div class="title">
      <div class="text">CONTACT US</div>
      <!-- <p>Communication is the first step to solving a problem</p> -->
    </div>
    <div class="contact_box">
      <div class="select">
        <el-select
          popper-class="contact_select"
          v-model="office_value"
          placeholder="Please select"
          :popper-append-to-body="false"
          @change="global_searchChange"
        >
          <el-option
            v-for="item in office_list"
            :key="item.value"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="contact_left_item">
          <img src="@/assets/images/contact_icon_01.png" alt />
          <div class="contact_left_item_text">
            Address：{{ office_active.address }}
          </div>
        </div>
        <div class="contact_left_item">
          <img src="@/assets/images/contact_icon_02.png" alt />
          <div class="contact_left_item_text">
            Phone：{{ office_active.tel }}
          </div>
        </div>
        <div class="contact_left_item">
          <img src="@/assets/images/contact_icon_03.png" alt />
          <div class="contact_left_item_text">
            Fax：{{ office_active.email }}
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import { office_list } from "@/api/contactUs.js";
import { leaveWord } from "@/api/home.js";
export default {
  data() {
    return {
      //联系我们内容
      name: "",
      tel: "",
      content: "",
      email: "",
      office_list: [],
      office_active: {},
      office_value: "",
    };
  },
  mounted() {
    this.getOffice_list();
  },
  methods: {
    // 获取工作室地址
    getOffice_list() {
      office_list().then((res) => {
        this.office_list = res.data.data;
        this.office_active = res.data.data[0];
        this.office_value = this.office_active.id;
      });
    },
    global_searchChange() {
      this.office_active = this.office_list.find(
        (item) => item.id == this.office_value
      );
    },
    //提交留言
    onLeaveWordSubmit() {
      let myregMobile = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/,
        myregEmail = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      if (!myregMobile.test(this.tel)) {
        return this.$message("Please enter the correct number");
      }
      if (!myregEmail.test(this.email)) {
        return this.$message("please enter your vaild email");
      }
      if (!this.content) {
        return this.$message("Please enter your message");
      }

      leaveWord({
        name: this.name,
        tel: this.tel,
        content: this.content,
        email: this.email,
        office_id: this.office_value,
      }).then((res) => {
        this.name = null;
        this.tel = null;
        this.content = null;
        this.email = null;
        return this.$message({
          message: "Thank you for your valuable comments",
          type: "success",
        });
      });
    },
  },
};
</script>
<style scoped src="./sass/home.css"></style>